<template>
  <div class="hongbao-container">
    <h2 class="title">我的红包</h2>

    <!-- 未使用的红包 -->
    <div v-if="unusedRedPackets.length">
      <h3 class="subtitle">未使用的红包</h3>
      <ul class="hongbao-list">
        <li v-for="packet in unusedRedPackets" :key="packet.packetId" class="hongbao-item unused">
          <div class="hongbao-info">
            <p>红包金额：¥{{ packet.num }}</p>
            <p>有效期至：{{ packet.expiredTime }}</p>
          </div>
        </li>
      </ul>
    </div>
    <p v-else class="empty">暂无未使用的红包</p>

    <!-- 已使用的红包 -->
    <div v-if="usedRedPackets.length">
      <h3 class="subtitle">已使用的红包</h3>
      <ul class="hongbao-list">
        <li v-for="packet in usedRedPackets" :key="packet.packetId" class="hongbao-item used">
          <div class="hongbao-info">
            <p>红包金额：¥{{ packet.num }}</p>
            <p>有效期至：{{ packet.expiredTime }}</p>
          </div>
        </li>
      </ul>
    </div>
    <p v-else class="empty">暂无已使用的红包</p>

    <!-- 返回按钮 -->
    <button class="back-btn" @click="togoBack">返回</button>
  </div>
</template>

<script>
export default {
  name: 'Hongbao',
  data() {
    return {
      user: {},
      redPackets: []
    };
  },
  computed: {
    // 未使用的红包
    unusedRedPackets() {
      return this.redPackets.filter(packet => packet.deleted === 0);
    },
    // 已使用的红包
    usedRedPackets() {
      return this.redPackets.filter(packet => packet.deleted === 1);
    }
  },
  created() {
    this.user = this.$getSessionStorage('user');

    if (this.user) {
      this.fetchRedPackets();
    } else {
      alert('请先登录！');
      this.$router.push('/login');
    }
  },
  methods: {
    // 获取当前用户的红包列表
    fetchRedPackets() {
      this.$axios.get('RedPacket/userId', {
        params: {
          userId: this.user.userId
        }
      }).then(response => {
        if (response.data.code === 200) {
          this.redPackets = response.data.result;
        } else {
          alert('获取红包失败: ' + response.data.message);
        }
      }).catch(error => {
        console.error('获取红包错误:', error);
      });
    },

    // 返回上一页
    togoBack() {
      this.$router.go(-1);
    }
  }
};
</script>

<style scoped>
.hongbao-container {
  max-width: 600px;
  margin: 20px auto;
  padding: 20px;
  background: #fff7e6;
  border-radius: 16px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.title {
  text-align: center;
  color: #ff6f00;
  margin-bottom: 20px;
}

.subtitle {
  color: #ff6f00;
  margin: 10px 0;
  font-size: 18px;
  font-weight: bold;
}

.hongbao-list {
  list-style: none;
  padding: 0;
}

.hongbao-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  margin-bottom: 12px;
  border-radius: 12px;
}

/* 未使用的红包（橙色背景） */
.unused {
  background: #ffecd9;
  border: 1px solid #ffa940;
}

/* 已使用的红包（灰色背景） */
.used {
  background: #e0e0e0;
  border: 1px solid #bdbdbd;
  color: #666;
}

.hongbao-info p {
  margin: 0;
}

.empty {
  text-align: center;
  color: #999;
}

.back-btn {
  display: block;
  margin: 20px auto;
  padding: 12px 20px;
  background: #ffa940;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

.back-btn:hover {
  background: #fa8c16;
}
</style>
